<template>
	<view style="padding: 30rpx;margin-bottom: 100rpx;display: flex;flex-direction: column;">
		<view style="margin-bottom: 10px;display: flex;flex-direction: column;align-items: center;">
			<uni-search-bar style="width: 100%;" v-model="searchValue"  radius="100" bgColor="#EEEEEE"  placeholder="输入商品名称"
			 cancelButton="always" clearButton="none" @confirm="search" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-bottom: 10px;">
			<view style="font-size: 14px;color: #03060D;font-weight: 600;">
				历史搜索
			</view>
			<view @click="handClearHistory" style="padding: 5px;">
				<uni-icons type="trash" size="24"></uni-icons>
			</view>
		</view>
		
		<view style="padding: 0 10px 0 10px;">
<!-- 			<view style="margin: 0 5px 10px 5px;padding: 5px 10px 5px 10px;float: left;font-size: 12px;color: #666666;background-color: #EEEEEE;border-radius: 25px;">
				裤子去球器英语与语言哦哦哦哦哦哦哦哦12
			</view>
			<view style="margin: 0 5px 10px 5px;padding: 5px 10px 5px 10px;float: left;font-size: 12px;color: #666666;background-color: #EEEEEE;border-radius: 25px;">
				我的123
			</view>
			<view style="margin: 0 5px 10px 5px;padding: 5px 10px 5px 10px;float: left;font-size: 12px;color: #666666;background-color: #EEEEEE;border-radius: 25px;">
				啊啊啊
			</view> -->
			<view v-for="(item,index) in historyList" :key="index" @click="handItem(item)" style="margin: 0 5px 10px 5px;padding: 5px 10px 5px 10px;float: left;font-size: 12px;color: #666666;background-color: #EEEEEE;border-radius: 25px;">
				{{item.key}}
			</view> 
		</view>
		
		
	</view>
</template>

<script>
	export default {
		name:'goodsFind',
		onLoad(option) {
			
		},
		onShow() {
			let value = uni.getStorageSync('goodsHistorySearchList');
			if(value){
				console.log(value,'____进入show__')
				this.historyList = value;
			}
		},
		created() {
			
		},
		data() {
			return {
				searchValue: '',
				historyList:[],
				
			}
		},
		methods: {
			handClearHistory(){
				this.$modal.confirm('是否清空数据？').then(() => {
				   this.historyList = [];
				   uni.removeStorageSync('goodsHistorySearchList');
				});
			},
			search(res) {
				//console.log(res.value,'_____search__',res.value.length)
				if(res.value.length == 0){
					this.$modal.showToast('请输入查询条件')
					return;
				}
				//console.log(res.value,'_____search__')
				let value = uni.getStorageSync('goodsHistorySearchList');
				if(value){
					console.log(value,'____value__存在_')
					value.unshift({
						"key":res.value
					})
					uni.setStorageSync('goodsHistorySearchList', value);
					// value.forEach((item) =>{
					// 	console.log(item.key,'____value__存在_')
					// })
				}else{
					console.log(value,'____value__不存在_')
					const historyLists =[];
					historyLists.push({
						"key":res.value
					})
					uni.setStorageSync('goodsHistorySearchList', historyLists);
				}
				
				this.$tab.navigateTo("/pages/goodsfind/goodsList?goodsName="+encodeURIComponent(res.value));
			},
			handItem(item){
				console.log(item.key,'_________点击item_____')
				this.$tab.navigateTo("/pages/goodsfind/goodsList?goodsName="+encodeURIComponent(item.key));
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>

</style>
